<template>
  <my-layout :menu_key="'2'">
    <el-input v-model="search" placeholder="请输入搜索内容" clearable prefix-icon="el-icon-search" style="width: 200px;"
              @change="app_list"></el-input>
    &nbsp;
    <el-button type="primary" @click="open_create_app_dialog">添加小程序</el-button>
    <el-dialog
        title="添加小程序"
        :visible.sync="create_app_dialog"
        width="50%"
        :before-close="close_create_app_dialog">
      <create-app @create_app_submit="create_app_submit"></create-app>
      <span slot="footer" class="dialog-footer">
  </span>
    </el-dialog>
    <template>

      <el-table
          class="tables"
          :data="app_lists"
          style="width: 100%"
          :header-cell-style="{textAlign:'center'}"
          :cell-style="{textAlign:'center'}">
        <el-table-column
            prop="name"
            label="小程序名称"
        >
        </el-table-column>
        <el-table-column
            label="秘钥"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.private_key_path!==''">
              <el-button size="small" type="success" icon="el-icon-check" circle></el-button>
              已上传
            </div>
            <div v-if="scope.row.private_key_path===''">
              <el-button size="small" type="danger" icon="el-icon-close" circle></el-button>
              未上传
            </div>

          </template>
        </el-table-column>
        <el-table-column
            prop="create_time"
            label="创建时间">
        </el-table-column>
        <el-table-column
            prop="update_time"
            label="编辑时间">
        </el-table-column>
        <el-table-column
            label="操作">
          <template slot-scope="scope">
            <el-row>
              <el-col span="12">
                <el-button type="danger" size="small" @click="delete_app(scope.row)">删除</el-button>
              </el-col>
              <el-col span="12">
                <el-button type="primary" size="small" @click="open_update_dialog(scope.row)">编辑</el-button>

              </el-col>
            </el-row>
          </template>
        </el-table-column>

        <!--        <template slot-scope="scope">-->
        <!--          <el-row>-->
        <!--            <el-col span="12">-->
        <!--              <el-button type="danger" @click="delete_user(scope.row)" size="small">删除</el-button>-->

        <!--            </el-col>-->
        <!--            <el-col span="12">-->
        <!--              <el-button type="primary" size="small" @click="set_password_open_dialog(scope.row)">修改密码</el-button>-->
        <!--              <el-dialog-->
        <!--                  title="修改密码"-->
        <!--                  :visible.sync="isPasswordDialog"-->
        <!--                  width="30%"-->
        <!--                  :before-close="handleClose">-->
        <!--        <span>-->
        <!--          <set-password :user_name="set_password_from.user_name" :user_id="set_password_from.user_id"-->
        <!--                        :nickname="set_password_from.nickname" @UserSubmit="set_password_submit"></set-password>-->
        <!--        </span>-->
        <!--                <span slot="footer" class="dialog-footer">-->
        <!--  </span>-->
        <!--              </el-dialog>-->
        <!--            </el-col>-->
        <!--          </el-row>-->
        <!--        </template>-->
      </el-table>
      <el-pagination
          layout="prev, pager, next"
          :total="count"
          @current-change="set_page">
      </el-pagination>
      <el-dialog
          title="编辑小程序"
          :visible.sync="update_app_dialog"
          width="50%"
          :before-close="close_create_app_dialog">
        <update-app :appid="this.update_app_from.appid"
                    :private_key_path="this.update_app_from.private_key_path"
                    :name="this.update_app_from.name"
                    @update_app_submit="update_app_submit"></update-app>
        <span slot="footer" class="dialog-footer">
  </span>
      </el-dialog>
    </template>
  </my-layout>
</template>

<script>
import MyLayout from "@/components/MyLayout";
import CreateApp from "@/components/wx_app/CreateApp";
import UpdateApp from "@/components/wx_app/UpdateApp";
import {CreateWxApp, GetWxAppList, DeleteWxApp, UpdateWxApp} from "@/request/api";

export default {
  name: "WxApp",
  components: {
    MyLayout,
    CreateApp,
    UpdateApp
  },
  created() {
    this.app_list();
  },
  data() {
    return {
      create_app_dialog: false,
      update_app_dialog: false,
      app_lists: [],
      page: 1,
      size: 10,
      count: 0,
      search: "",
      update_app_from: {
        appid: '',
        private_key_path: '',
        name: ''
      }
    }
  },
  methods: {
    //关闭添加小程序的弹框
    close_create_app_dialog() {
      this.create_app_dialog = false;
      this.update_app_dialog = false;
    },
    //打开添加小程序的弹框
    open_create_app_dialog() {
      this.create_app_dialog = true;
    },
    open_update_dialog(row) {
      console.log(row)
      this.update_app_dialog = true;
      this.update_app_from.appid = row.appid;
      this.update_app_from.private_key_path = row.private_key_path;
      this.update_app_from.name = row.name;
      console.log(this.update_app_from);

    },
    create_app_submit(form) {
      console.log(form);
      let data = {
        appid: form.appid,
        private_key_path: form.private_key_path,
        name: form.name
      }
      CreateWxApp(data).then(res => {
        if (res.code == 200) {
          this.$message({
            showClose: true,
            message: '恭喜你，创建小程序成功',
            type: 'success'
          });
          this.create_app_dialog = false;
          this.app_list();
        } else {
          this.$message({
            showClose: true,
            message: res.msg,
            type: 'error'
          });
        }

      })
    },
    set_page(page) {
      this.page = page
      this.app_list();
    },
    app_list() {
      let data = {
        page: this.page,
        size: this.size,
        search: this.search
      }
      GetWxAppList(data).then(res => {
        if (res.code == 200) {
          this.app_lists = res.data.list;
          this.count = res.data.count;
        } else {
          this.$message({
            showClose: true,
            message: res.msg,
            type: 'error'
          });
        }
      })
    },
    delete_app(row) {
      let data = {
        appid: row.appid
      }
      DeleteWxApp(data).then(res => {
        if (res.code == 200) {
          this.$message({
            showClose: true,
            message: "恭喜你，删除成功",
            type: 'success'
          });
          this.app_list()
        } else {
          this.$message({
            showClose: true,
            message: res.msg,
            type: 'error'
          });
        }
      })
    },
    update_app_submit(form) {
      let data = {
        appid: form.appid,
        private_key_path: form.private_key_path,
        name: form.name
      }
      UpdateWxApp(data).then(res => {
        console.log(res)
        if (res.code == 200) {
          this.$message({
            showClose: true,
            message: "恭喜你，编辑成功",
            type: 'success'
          });
          this.update_app_dialog = false;
          this.app_list();
        } else {
          this.$message({
            showClose: true,
            message: res.msg,
            type: 'error'
          });
        }
      })
    }
  }
}
</script>

<style scoped>
.tables {
  margin-top: 20px;
}
</style>